<script setup lang="ts">
const props: any = defineProps<{
    ujt: any;
}>();
const { $global, $fn } = props.ujt;
$fn.initrouter();
</script>

<template>
    <MenuShowFix
        :ujt="ujt"
        :menus="$global.url[$global.module.value]"
    ></MenuShowFix>
    <div class="app-area">
        <div class="app-logo">
            <img :src="'./assets/img/logo.png'" width="200" />
        </div>
        <div class="app-menu-area">
            <div
                v-for="item in $global.url[$global.module.value]"
                :class="`app-menu${item.type === 'module' ? ' module' : ''}`"
                :key="item.value"
                @pointerup="
                    $fn.sethash(item.value === 'views' ? '' : item.value)
                "
            >
                <span class="menu-text">{{ item.label }}</span>
            </div>
        </div>
        <div class="app-login">
            <UserCard :ujt="ujt"></UserCard>
        </div>
    </div>
</template>

<style scoped lang="scss">
.app-area {
    display: flex;
    flex-direction: column;
    height: calc(100% - 60px);
    padding: 20px;

    .app-menu-area {
        flex-grow: 1;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
        padding: 20px;
        align-content: flex-start;
        overflow-y: auto;
        max-height: 100%;
        scrollbar-width: thin;
        scrollbar-color: var(--cm5) var(--cm1);

        &::-webkit-scrollbar {
            width: 8px;
        }

        &::-webkit-scrollbar-track {
            background: var(--cm1);
            border-radius: 4px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: var(--cm5);
            border-radius: 4px;
        }
        .module {
            background: var(--ch6) !important;
            color: var(--ch0) !important;
        }
        .app-menu {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 38px;
            background: linear-gradient(135deg, var(--cm0) 0%, var(--cm1) 100%);
            color: var(--cm8);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 15px;
            position: relative;
            overflow: hidden;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, 0.1);
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            &:hover {
                transform: translateY(-5px);
                box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);

                &::before {
                    opacity: 1;
                }
            }

            &:active {
                transform: translateY(0);
            }

            .menu-text {
                font-size: 16px;
                font-weight: 500;
                text-align: center;
                width: 100%;
                white-space: nowrap; /* 禁止换行 */
                overflow: hidden; /* 隐藏溢出内容 */
                text-overflow: ellipsis; /* 显示省略号 */
                direction: rtl; /* 设置文本从右到左显示 */
                // unicode-bidi: bidi-override; /* 强制覆盖文本方向 */
                padding: 0 10px;
            }
        }
    }

    .app-logo {
        height: auto;
        padding: 20px 10px;
        display: flex;
        justify-content: center;

        img {
            max-width: 100%;
            height: auto;
        }
    }

    .app-login {
        height: auto;
        padding: 20px 10px;
        display: flex;
        justify-content: flex-end;
    }

    // 响应式设计
    @media (max-width: 768px) {
        .app-menu-area {
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            padding: 15px;

            .app-menu {
                min-height: 70px;

                .menu-text {
                    font-size: 14px;
                }
            }
        }
    }

    @media (max-width: 480px) {
        padding: 10px;

        .app-menu-area {
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 10px;
            padding: 10px;

            .app-menu {
                min-height: 60px;
                padding: 10px;

                .menu-text {
                    font-size: 13px;
                }
            }
        }
    }
}
</style>
